<template>
  <virtual-list class="inf-grid" style="height: 360px; overflow-y: auto;"
    :data-key="'row_id'"
    :data-sources="items"
    :data-component="itemComponent"
    @tobottom="onToBottom"
  />
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'
export default {
  name: 'ZScrollDemo',
  components: {
    VirtualList
  },
  props: {
    list: Array,
    itemComponentName: String,
    column: {
      type: Number,
      default: 1
    }
  },
  data() {
    // console.log(ZY.lodash.chunk(this.list, this.column))
    let self = this
    return {
      itemComponent: CustomCusComponent.components[this.itemComponentName],
      items: this.getItems()
    }
  },
  watch: {
    list() {
      this.items = this.getItems()
    }
  },
  methods: {
    getItems() {
      let self = this
      return ZY.lodash.chunk(this.list, this.column).map(v => {
        return {
          row_id: ZY.rid(),
          column: self.column,
          row: v
        }
      })
    },
    onToBottom() {
      console.log('onToBottom')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
